//订单列表
export var name = "order-o1";

export function render() {
    return `
        <style>
            /* 容器基础样式 */
            .order-container {
                padding: 20px;
                background-color: #f8f9fa;
                min-height: calc(100vh - 60px);
            }

            /* 页面头部布局 */
            .page-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                flex-wrap: wrap;
                gap: 12px;
            }

            .page-header h2 {
                margin: 0;
                font-size: 1.5rem;
                color: #212529;
                font-weight: 600;
            }

            /* 筛选控件样式 */
            .filter-controls .form-select {
                padding: 6px 12px;
                border: 1px solid #dee2e6;
                border-radius: 4px;
                background-color: #fff;
                font-size: 14px;
                transition: border-color 0.2s;
            }

            .filter-controls .form-select:focus {
                outline: none;
                border-color: #4361ee;
                box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
            }

            /* 卡片容器样式 */
            .card {
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                overflow: hidden;
            }

            .card-body {
                padding: 20px;
            }

            /* 表格样式优化 */
            .table {
                width: 100%;
                border-collapse: collapse;
                margin-bottom: 0;
            }

            .table thead {
                background-color: #f1f3f5;
            }

            .table th,
            .table td {
                padding: 12px 15px;
                text-align: left;
                border-bottom: 1px solid #e9ecef;
                font-size: 14px;
            }

            .table th {
                font-weight: 500;
                color: #495057;
                white-space: nowrap;
            }

            .table tbody tr:hover {
                background-color: #f8f9fa;
                transition: background-color 0.2s;
            }

            .table-striped tbody tr:nth-of-type(odd) {
                background-color: rgba(0, 0, 0, 0.02);
            }

            /* 状态徽章样式 */
            .badge {
                padding: 3px 8px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 500;
            }

            .badge.bg-primary {
                background-color: #4361ee;
                color: #fff;
            }

            .badge.bg-success {
                background-color: #28a745;
                color: #fff;
            }

            .badge.bg-warning {
                background-color: #ffc107;
                color: #212529;
            }

            .badge.bg-danger {
                background-color: #dc3545;
                color: #fff;
            }

            /* 按钮样式优化 */
            .btn {
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 12px;
                transition: all 0.2s;
                border: 1px solid transparent;
                cursor: pointer;
            }

            .btn-sm {
                padding: 2px 6px;
            }

            .btn-outline-primary {
                color: #4361ee;
                border-color: #4361ee;
                background-color: transparent;
            }

            .btn-outline-primary:hover {
                background-color: #4361ee;
                color: #fff;
            }

            .btn-outline-primary:active {
                box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
            }

            /* 响应式调整 */
            @media (max-width: 768px) {
                .page-header {
                    flex-direction: column;
                    align-items: flex-start;
                }

                .card-body {
                    padding: 15px;
                    overflow-x: auto;
                }

                .table th,
                .table td {
                    padding: 10px 8px;
                    font-size: 13px;
                }
            }
        </style>

        <div class="order-container">
            <div class="page-header">
                <h2>订单管理 - 订单1</h2>
                <div class="filter-controls">
                    <select class="form-select">
                        <option>全部状态</option>
                        <option>待付款</option>
                        <option>已付款</option>
                        <option>已发货</option>
                        <option>已完成</option>
                        <option>已取消</option>
                    </select>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>客户</th>
                                <th>金额</th>
                                <th>日期</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>ORD20230512001</td>
                                <td>张三</td>
                                <td>¥1,299</td>
                                <td>2023-05-12</td>
                                <td><span class="badge bg-primary">已付款</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>ORD20230512002</td>
                                <td>李四</td>
                                <td>¥899</td>
                                <td>2023-05-12</td>
                                <td><span class="badge bg-success">已完成</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>ORD20230511001</td>
                                <td>王五</td>
                                <td>¥2,599</td>
                                <td>2023-05-11</td>
                                <td><span class="badge bg-warning">已发货</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>ORD20230510003</td>
                                <td>赵六</td>
                                <td>¥599</td>
                                <td>2023-05-10</td>
                                <td><span class="badge bg-danger">已取消</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    `;
}

export function afterRender() {
    console.log("Order o1 component rendered");
}